<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head th:replace="fragments :: head(~{::title})">
        <Title>关于我</Title>
    </head>
    <body >
    <!-- 导航 -->
    <nav th:replace="fragments::menu(5)"></nav>

    <!-- 中间内容 -->
    <div class="me-padded-tb-large m-container-small">
      <div class="ui container">
            <div class="ui stackable grid">
                <!-- 图片 -->
                <div class="eleven wide column">
                    <img src="../static/image/bg5.jpg" alt="" class="ui rounded image" style="width: 800px; height: 400px;">
                </div>

                <div class="five wide column">
                    <div class="ui top attached segment">
                        <div class="ui header">关于我</div>
                    </div>
                    <div class="ui attached segment">
                     <p> 热衷于技术的独立开发者，喜欢分享生活 ！</p>
                    </div>
                    <div class="ui attached segment">
                           <div class="ui label orange basic me-marrgin-tb-tiny">编程</div>
                           <div class="ui label orange basic me-marrgin-tb-tiny">科技数码</div>
                           <div class="ui label orange basic me-marrgin-tb-tiny">写作</div>
                           <div class="ui label orange basic me-marrgin-tb-tiny">美食</div>
                           <div class="ui label orange basic me-marrgin-tb-tiny">摄影</div>
                           <div class="ui label orange basic me-marrgin-tb-tiny">动漫</div>
                           <div class="ui label orange basic me-marrgin-tb-tiny">体育</div>
                    </div>
                    <div class="ui attached segment">
                            <div class="ui label teal basic me-marrgin-tb-tiny">java</div>
                           <div class="ui label teal basic me-marrgin-tb-tiny">Springboot</div>
                           <div class="ui label teal basic me-marrgin-tb-tiny">NoSQL redis</div>
                           <div class="ui label teal basic me-marrgin-tb-tiny">MyBatisPlus</div>
                           <div class="ui label teal basic me-marrgin-tb-tiny">Vue</div>
                           <div class="ui label teal basic me-marrgin-tb-tiny">算法</div>
                           <div class="ui label teal basic me-marrgin-tb-tiny">数据结构</div>
                    </div>
                    <div class="ui bottom attached segment">
                            <a href="https://github.com/1193700079?tab=repositories" class="ui github circular icon button" target="_blank"> <i class="github icon"></i></a>
                            <a href="" class="ui wechat circular icon button"> <i class="weixin icon"></i></a>
                            <a href="" class="ui qq circular icon button "
                            data-content="1193700079"> <i class="qq icon"></i></a>
                    </div>

                    <div class="ui wechat_qr flowing popup transition hidden">
                        <img src="../static/image/wechat.png" alt="" class="ui rounded image"
                             style="width: 100px;">
                    </div>
                </div>
            </div>
      </div>
    </div>

    <!-- 底部栏 -->
    <footer th:replace="fragments::footer"></footer>

    <!-- 引入js脚本 -->
    <!--/*/<th:block th:replace="fragments :: script">/*/-->
    <!--/*/</th:block>/*/-->

    <script>
     $(".PopInfo").popup({
        popup : $(".InfoMe.popup"),
         position: "left center"
     });
     $(".qq").popup({
         position: "bottom center"
     });
     $(".wechat").popup({
         popup : $(".wechat_qr.popup"),
         position: "bottom center"
     });
     // 手机端点击显示导航栏
     $('.menu.toggle').on('click',function(){
         $(".me-item").toggleClass("me-mobile-hide");
     });
    </script>
    </body>
</html>